<style scoped>
    .spare-file-page{}
    /*overflow-x:hidden;overflow-y:scroll;*/
    .spare-file-page .condition{line-height: 36px;}

 

    /* 导入的弹窗 */
    #LeadIngInMark .el-dialog.el-dialog--small{width:36%;min-height:160px;padding-bottom:20px;}
    #LeadIngInMark .el-dialog .el-dialog__body{padding-bottom:0;}
    #LeadIngInMark .el-dialog .el-input{width:66%;}
    #LeadIngInMark .el-dialog .el-form .el-form-item{}
    #LeadIngInMark .el-dialog .el-dialog__body .el-form-item:last-of-type{margin-bottom:0;}
    #LeadIngInMark .el-dialog .el-form-item__label{text-align: left;}

    /*查看看备件弹窗*/
    #seeSpareMark .el-dialog.el-dialog--small{padding-bottom:16px;width:90%;}
    #seeSpareMark .el-dialog .el-dialog__body{height:560px;overflow-x: hidden;overflow-y: scroll;}
    #seeSpareMark .el-dialog .el-input{width:100%;}
    /* 菜单导航 */
    .el-menu{margin-bottom:15px;}
    .under-table{display:none;}
    .supplier{display:block;}
    .el-menu-demo .el-menu-item{height:35px;line-height:35px;}
    
    .el-dialog .title{display:inline-block;}
    ._box{position:relative;padding-left:5px;display:inline-block;width:331px;height:30px;line-height:30px;text-align:left;border:1px solid #cccccc;margin-bottom:30px;}
    ._box p{font-size:12px;color:#666666;}
    ._box .browse_btn{position:absolute;right:0;top:0;width:80px;height:30px;line-height:30px;text-align:center;background: #f5f5f5;border-left:1px solid #cccccc;font-size:14px;color:#666666;}
    ._box .browse_btn input{position:absolute;right:0;top:0;width:100%;height:100%;cursor:pointer;cursor:hand;opacity: 0;}


</style>

<template> 
    <div class="spare-file-page">
        <div class="spare-file-page-content" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在加载">
            <el-form :inline="true" :model="queryCriteria" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
                <!--备件编码-->
                <el-form-item :label="nowLangue.spareCode" class="selectMB10">
                    <el-input size="mini" v-model="queryCriteria.code" :placeholder="nowLangue.pleaseImport+nowLangue.spareCode" id="code"></el-input>
                </el-form-item>
                <!--备件名称-->
                <el-form-item :label="nowLangue.spareName" class="selectMB10">
                    <el-input size="mini" v-model="queryCriteria.name" :placeholder="nowLangue.pleaseImport+nowLangue.spareName" id="name"></el-input>
                </el-form-item>
                <!--是否启用-->
                <el-form-item :label="nowLangue.isEnable" class="selectMB10">
                    <el-select size="mini" clearable v-model="queryCriteria.enabled" id="enabled" :placeholder="nowLangue.pleaseSelect">
                        <el-option v-for="(enabled,index) in qCDownMenuValueList['meterial.enabled']" :key="index" :label="enabled.label" :value="enabled.value"></el-option>
                    </el-select>
                </el-form-item>
                <!--计划大类-->
                <el-form-item :label="nowLangue.planCategory" class="selectMB10">
                    <el-input size="mini" v-model="queryCriteria.planCategory" :placeholder="nowLangue.pleaseImport+nowLangue.planCategory" id="planCategory"></el-input>
                </el-form-item>
                <!--PSI标志-->
                <el-form-item :label="nowLangue.PSISign" class="selectMB10">
                    <el-select size="mini" clearable v-model="queryCriteria.psiFlag" :placeholder="nowLangue.pleaseSelect" id="psiFlag">
                        <el-option v-for="(psiFlag,index) in qCDownMenuValueList['meterial.psiFlag']" :key="index" :label="psiFlag.label" :value="psiFlag.value"></el-option>
                    </el-select>
                </el-form-item>
                <!--ROHS属性-->
                <el-form-item :label="nowLangue.ROHSAttr" class="selectMB10">
                    <el-select size="mini" clearable v-model="queryCriteria.roshProperty" :placeholder="nowLangue.pleaseSelect" id="roshProperty" >
                        <el-option v-for="(roshProperty,index) in qCDownMenuValueList['meterial.rohsProperty']" :key="index" :label="roshProperty.label" :value="roshProperty.value"></el-option>
                    </el-select>
                </el-form-item>
                <!--是否可供货-->
                <el-form-item :label="nowLangue.canSupply" class="selectMB10">
                    <el-select size="mini" clearable v-model="queryCriteria.canSupply" id="canSupply" :placeholder="nowLangue.pleaseSelect">
                        <el-option v-for="(canSupply,index) in qCDownMenuValueList['meterial.canSupply']" :key="index" :label="canSupply.label" :value="canSupply.value"></el-option>
                    </el-select>
                </el-form-item>
                <!--供应商备件号-->
                <el-form-item :label="nowLangue.providerNo" class="selectMB10">
                    <el-input size="mini" v-model="queryCriteria.providerNo" :placeholder="nowLangue.pleaseImport+nowLangue.providerNo" id="providerNo"></el-input>
                </el-form-item>
                <!--采购供应商-->
                <el-form-item :label="nowLangue.purchaseSupplier" class="selectMB10">
                    <el-input size="mini" v-model="queryCriteria.providerName" :placeholder="nowLangue.pleaseImport+nowLangue.purchaseSupplier" id="providerName"></el-input>
                </el-form-item>
                <!--索赔商-->
                <el-form-item :label="nowLangue.claimMaker" class="selectMB10">
                    <el-input size="mini" v-model="queryCriteria.claim" :placeholder="nowLangue.pleaseImport+nowLangue.claimMaker" id="claim"></el-input>
                </el-form-item>
                <!--备件小类-->
                <el-form-item :label="nowLangue.spareSubClass" class="selectMB10">
                    <el-input size="mini" v-model="queryCriteria.subclass" :placeholder="nowLangue.pleaseImport+nowLangue.spareSubClass" id="subclass"></el-input>
                </el-form-item>
                <!--查询-->
                <el-form-item class="selectMB10">
                    <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="handleQuery(pageIndex,pageSize)" v-text="nowLangue.query"></el-button>
                </el-form-item>
            </el-form>
            <!--表格-->
            <!--备件清单：-->
            <label class="default-label" v-text="nowLangue.spareList"></label>
            <!--导入-->
            <el-button v-if="powerFlag" class="bolder outsideBtnBS" size="mini" type="danger"  @click="leadingInMask" v-text="nowLangue.import"></el-button>
            <!--导出-->
            <el-button v-if="powerFlag" class="bolder outsideBtnBS" size="mini" type="danger" @click="leadingOutMask" v-text="nowLangue.export"></el-button>
            <!--备件清单-->
            <el-table :data="spareLists" border style="width:100%;width: 100%;" v-loading.body="loading" element-loading-text="拼命加载中">
                <!--序-->
                <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence"  width="40"></el-table-column>
                <!--操作-->
                <el-table-column :label="nowLangue.operate" header-align="center" align="center" width="120">
                    <template scope="scope">
                        <!--启用-->
                        <button class="operationItem bolder" v-if="scope.row.enabled=='否' && powerFlag" @click="handleStatus(scope.$index, scope.row)" v-text="nowLangue.enable" :disabled="statusDisabled"></button>
                        <!--禁用-->
                        <button class="operationItem bolder" v-else-if="powerFlag && scope.row.enabled=='是'" @click="handleStatus(scope.$index, scope.row)" v-text="nowLangue.forbidden" :disabled="statusDisabled"></button>
                        <!--修改-->
                        <button class="operationItem disabled bolder" v-if="powerFlag && scope.row.enabled=='是'" v-text="nowLangue.update"></button>
                        <!--修改-->
                        <button class="operationItem bolder" v-else-if="powerFlag && scope.row.enabled=='否'" @click="changeSpare(scope.$index, scope.row)"v-text="nowLangue.update"></button>
                        <!--查看-->
                        <button class="operationItem bolder" @click="seeSpare(scope.$index, scope.row)" v-text="nowLangue.lookUp"></button>
                    </template>  
                </el-table-column>
                <!--备件编码-->
                <el-table-column prop="code" :label="nowLangue.spareCode" header-align="center" width="180"  show-overflow-tooltip></el-table-column>
                <!--备件名称-->
                <el-table-column prop="name" :label="nowLangue.spareName" header-align="center" width="180" show-overflow-tooltip></el-table-column>
                <!--备件小类-->
                <el-table-column prop="subclassName" :label="nowLangue.spareSubClass" header-align="center"  show-overflow-tooltip></el-table-column>
                <!--是否启用-->
                <el-table-column prop="enabled" :label="nowLangue.isEnable" header-align="center"></el-table-column>
                <!--计划大类-->
                <el-table-column prop="planCategoryName" :label="nowLangue.planCategory" header-align="center"  show-overflow-tooltip></el-table-column>
                <!--是否可借用-->
                <el-table-column prop="borrowable" :label="nowLangue.isBorrowable" header-align="center"></el-table-column>
                <!--是否可供货-->
                <el-table-column prop="canSupply" :label="nowLangue.canSupply" header-align="center"></el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange"  :current-page.sync="currentPage3" :current-page="pageIndex"  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage" :total="totalNumber"></el-pagination>
       
    

            <!--导入的弹框-->
            <!--导入备件信息-->
            <el-dialog :title="nowLangue.importSpareMes" id="LeadIngInMark" :visible.sync="LeadIngInVisible" size="tiny" :lock-scroll="false"> 
                <el-upload class="upload-demo"  :action="action" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <!--点击上传-->
                    <el-button size="mini" type="danger" v-text="nowLangue.clickUpload"></el-button>
                    <!--只能上传excel文件-->
                    <div slot="tip" class="el-upload__tip" v-text="nowLangue.uploadTip"></div>
                </el-upload>
            </el-dialog>

            <!--查看备件弹窗-->
            <!--查看备件-->
            <el-dialog :title="nowLangue.lookUpSpare" id="seeSpareMark" class="seeDisabled" :visible.sync="seeSpareVisible" size="large" :lock-scroll="false">
                <el-form :inline="true" :model="seeSpareContent" class="demo-form-inline" style="margin-bottom:20px;border-bottom:1px solid #ccc;">
                    <!--备件小类-->
                    <el-form-item :label="nowLangue.spareSubClass" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.subclassName" placeholder="" ></el-input>
                    </el-form-item>
                    <!--计划备件大类-->
                    <el-form-item :label="nowLangue.planCategory" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.planCategoryName" placeholder="" ></el-input>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth" class="selectMB10 checkboxAlign" >
                        <!--启用-->
                        <el-checkbox disabled v-model="seeSpareContent.enabled" v-cloak>{{nowLangue.enable}}</el-checkbox>
                        <!--服务卡-->
                        <el-checkbox disabled v-model="seeSpareContent.serviceCard" v-cloak>{{nowLangue.serviceCard}}</el-checkbox>
                    </el-form-item>
                    <!--备件编码-->
                    <el-form-item :label="nowLangue.spareCode" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.code" placeholder=""></el-input>
                    </el-form-item>
                    <!--备件名称-->
                    <el-form-item :label="nowLangue.spareName" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.name" placeholder=""></el-input>
                    </el-form-item>
                    <!--备件属性-->
                    <el-form-item :label="nowLangue.spareAttr" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.propertyName" placeholder=""></el-input>
                    </el-form-item>
                    <!--序列化-->
                    <el-form-item :label="nowLangue.serialize" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.serializableName"></el-input>
                    </el-form-item>
                    <!--是否可借用-->
                    <el-form-item :label="nowLangue.isBorrowable" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.borrowableName"></el-input>
                    </el-form-item>
                    <!--Lenovo是否可销售-->
                    <el-form-item :label="nowLangue.lenovoSellable" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.lenovoSellable"></el-input>
                    </el-form-item>
                    <!--Think是否可销售-->
                    <el-form-item :label="nowLangue.thinkSellable" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.thinkSellableName"></el-input>
                    </el-form-item>
                    <!--是否自动分配-->
                    <el-form-item :label="nowLangue.canAutoAllot" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.canAutoAllotName"></el-input>
                    </el-form-item>
                    <!--停产支持MOQ-->
                    <el-form-item :label="nowLangue.supportMOQ" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.supportMOQ" placeholder=""></el-input>
                    </el-form-item>
                    <!--引入时间-->
                    <el-form-item :label="nowLangue.leadInTime" class="selectMB10">
                        <el-input disabled size="mini" type="date" v-model="seeSpareContent.introduceTime" placeholder=""></el-input>
                    </el-form-item>
                    <!--状态-->
                    <el-form-item :label="nowLangue.status" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.statusName"></el-input>
                    </el-form-item>
                    <!--特殊运输要求-->
                    <el-form-item :label="nowLangue.specialTransportRequirements" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.specialTransportRequired"></el-input>
                    </el-form-item>
                    <!--采购优先级-->
                    <el-form-item :label="nowLangue.procurementPriority" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.purchasePriorityName" placeholder=""></el-input>
                    </el-form-item>
                    <!--是否可供货-->
                    <el-form-item :label="nowLangue.canSupply" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.canSupplyName"></el-input>
                    </el-form-item>
                    <!--不可供货原因-->
                    <el-form-item :label="nowLangue.noSupplyReason" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.noSupplyReason" placeholder=""></el-input>
                    </el-form-item>
                    <!--采购方式-->
                    <el-form-item :label="nowLangue.purchaseMethod" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.purchaseMethodName" placeholder=""></el-input>
                    </el-form-item>
                    <!--服务工厂-->
                    <el-form-item :label="nowLangue.serviceFactory" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.serviceFactoryName" placeholder=""></el-input>
                    </el-form-item>
                    <!-- 
                    <el-form-item class="selectMB10">
                        <el-button disabled size="mini" type="danger">保存</el-button>
                    </el-form-item>
                    -->
                </el-form>
                <el-form :inline="true" :model="seeSpareContent" class="demo-form-inline" style="margin-bottom:20px;border-bottom:1px solid #ccc;">
                    <!--供应商备件号-->
                    <el-form-item :label="nowLangue.providerNo" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.providerNo" placeholder=""></el-input>
                    </el-form-item>
                    <!--原厂备件号-->
                    <el-form-item :label="nowLangue.originalSpareNumber" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.originalNo" placeholder=""></el-input>
                    </el-form-item>
                    <!--原厂商-->
                    <el-form-item :label="nowLangue.originalManufacturer" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.originalManufacturerName" placeholder=""></el-input>
                    </el-form-item>
                    <!--原产地-->
                    <el-form-item  :label="nowLangue.countryOfOrigin" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.originalProduceAreaName" placeholder=""></el-input>
                    </el-form-item>
                    <!--净重(单位：克)-->
                    <el-form-item :label="nowLangue.suttle" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.suttle" placeholder=""></el-input>
                    </el-form-item>
                    <!--原材料-->
                    <el-form-item :label="nowLangue.rawMaterial" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.rawMaterials" placeholder=""></el-input>
                    </el-form-item>
                    <!--规格-->
                    <el-form-item :label="nowLangue.standard" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.standard" placeholder=""></el-input>
                    </el-form-item>
                    <!--EOL日期-->
                    <el-form-item :label="nowLangue.EOLDate" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.eOLTime" placeholder=""></el-input>
                    </el-form-item>
                    <!--量产MOQ-->
                    <el-form-item :label="nowLangue.outPutMOQ" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.volumeProductionMOQ" placeholder=""></el-input>
                    </el-form-item>
                    <!--最小包装单位-->
                    <el-form-item :label="nowLangue.minimumPackingUnit" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.minimumPackageUnit" placeholder=""></el-input>
                    </el-form-item>
                    <!--PSI标志-->
                    <el-form-item :label="nowLangue.PSISign" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.psiFlagName" placeholder=""></el-input>
                    </el-form-item>
                    <!--ROHS属性-->
                    <el-form-item :label="nowLangue.ROHSAttr" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.rohsPropertyName" placeholder=""></el-input>
                    </el-form-item>
                    <!--备件单位-->
                    <el-form-item :label="nowLangue.spareUnit" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.unit" placeholder=""></el-input>
                    </el-form-item>
                    <!--备注信息-->
                    <el-form-item :label="nowLangue.memoMes" class="selectMB10">
                        <el-input disabled size="mini" v-model="seeSpareContent.remark" placeholder=""></el-input>
                    </el-form-item>
                </el-form>
                <!-- 菜单导航 -->
                <el-menu default-active="supplier" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <!--供应商-->
                    <el-menu-item index="supplier" v-text="nowLangue.supplier"></el-menu-item>
                    <!--索赔商-->
                    <el-menu-item index="claimMaker" v-text="nowLangue.claimMaker"></el-menu-item>
                    <!--维修商-->
                    <el-menu-item index="maintainer" v-text="nowLangue.maintainer"></el-menu-item>
                </el-menu>
                <!--表格-->
                <!-- 供应商 -->
                <el-table class="under-table supplier" :data="supplierData" border style="margin-top:16px;width: 100%;">
                    <!--序-->
                    <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence"  width="40"></el-table-column>
                    <!--
                        <el-table-column prop="status" :label="nowLangue.operate" header-align="center" align="center" width="180">
                            <template scope="scope">
                                <el-button disabled size="mini" type="danger" v-if="!scope.row.status">启用</el-button>
                                <el-button disabled size="mini" type="danger" v-else>禁用</el-button>
                            </template>
                        </el-table-column>
                        -->
                    <!--供应商编号-->
                    <el-table-column prop="code" :label="nowLangue.supplierNo" header-align="center"  show-overflow-tooltip></el-table-column>
                    <!--供应商名称-->
                    <el-table-column prop="name" :label="nowLangue.supplierName" header-align="center"  show-overflow-tooltip></el-table-column>
                    <!--默认-->
                    <el-table-column prop="defaultStatus" :label="nowLangue.default" header-align="center" align="center" width="80" v-if="myPurchaseMethod==1">
                        <template scope="scope">
                            <el-radio disabled v-model="defaultSupplier" :label="scope.row.id" size="mini">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <!--供货比例-->
                    <el-table-column prop="matchStatus" :label="nowLangue.supplyProportion" header-align="center" align="center" width="80" v-else>
                        <template scope="scope">
                            <el-checkbox disabled size="mini" v-model="scope.row.matchStatus"></el-checkbox>
                        </template>
                    </el-table-column>
                    <!--比例(%)-->
                    <el-table-column prop="proportion" :label="nowLangue.percentage" header-align="center" width="100" v-if="myPurchaseMethod==2">
                        <template scope="scope">
                            <el-input disabled size="mini" v-model="scope.row.proportion" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <!--当前状态-->
                    <el-table-column prop="status" :label="nowLangue.currentState" header-align="center" align="center"  show-overflow-tooltip></el-table-column>
                    <!-- 
                    <el-table-column prop="sfkjy" label="复制到索赔商" header-align="center" align="center">
                        <template scope="scope">
                            <el-button disabled size="mini" type="primary" @click="copeClaimMaker(scope.$index, scope.row)">复制到索赔商</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sfkgh" label="复制到维修商" header-align="center" align="center">
                        <template scope="scope">
                            <el-button disabled size="mini" type="primary" @click="copeMaintainer(scope.$index, scope.row)">复制到维修商</el-button>
                        </template>
                    </el-table-column>
                    -->
                </el-table>
                <!-- 索赔商 -->
                <el-table class="under-table claimMaker" :data="supplierData" border style="margin-top:16px;width: 100%;">
                    <!--序-->
                    <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence"  width="40"></el-table-column>
                    <!--
                        <el-table-column :label="nowLangue.operate" header-align="center" align="center" width="180">
                            <template scope="scope">
                                <el-button disabled size="mini" type="danger" v-if="!scope.row.status">启用</el-button>
                                <el-button disabled size="mini" type="danger" v-else>禁用</el-button>
                            </template>
                        </el-table-column>
                        -->
                    <!--索赔商编号-->
                    <el-table-column prop="code" :label="nowLangue.claimNo" header-align="center" width="180"  show-overflow-tooltip></el-table-column>
                    <!--索赔商名称-->
                    <el-table-column prop="name" :label="nowLangue.claimName" header-align="center"  show-overflow-tooltip></el-table-column>
                    <!--默认-->
                    <el-table-column prop="defaultStatus" :label="nowLangue.default" header-align="center" align="center" width="80">
                        <template scope="scope">
                            <el-radio disabled v-model="defaultClaimMaker"  :label="scope.row.id" size="mini">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <!--当前状态-->
                    <el-table-column prop="status" :label="nowLangue.currentState" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                </el-table>
                <!-- 维修商 -->
                <el-table class="under-table maintainer" :data="supplierData" border style="margin-top:16px;width: 100%;">
                    <!--序-->
                    <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence"  width="40"></el-table-column>
                    <!--
                        <el-table-column :label="nowLangue.operate" header-align="center" align="center" width="180">
                            <template scope="scope">
                                <el-button disabled size="mini" type="danger" v-if="!scope.row.status">启用</el-button>
                                <el-button disabled size="mini" type="danger" v-else>禁用</el-button>
                            </template>
                        </el-table-column>
                        -->
                    <!--维修商编号-->
                    <el-table-column prop="code" :label="nowLangue.serviceNo" header-align="center" width="180"  show-overflow-tooltip></el-table-column>
                    <!--维修商名称-->
                    <el-table-column prop="name" :label="nowLangue.serviceName" header-align="center" show-overflow-tooltip></el-table-column>
                    <!--默认-->
                    <el-table-column  prop="defaultStatus" :label="nowLangue.default" header-align="center" align="center" width="80">
                        <template scope="scope">
                            <el-radio disabled v-model="defaultMaintainer" :label="scope.row.id" size="mini">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <!--当前状态-->
                    <el-table-column prop="status" :label="nowLangue.currentState" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>

<script>
       export default {
        data() {
            return {
                nowLangue:{},
                queryCriteria:{     //查询条件
                    id:1,
                    code:'',
                    name:'',
                    enabled:'',
                    planCategory:'',
                    psiFlag:'',
                    roshProperty:'',
                    canSupply:'',
                    providerNo:'',
                    subclass:'',
                    providerName:'',
                    claim:''
                },
                loading:false,
                fullscreenLoading:false,//导出加载
                qCDownMenuValueList:[],    //查询条件下拉菜单的值
                isPaging:false,    //是否显示分页
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                currentPage3:3,    //当前显示3页
                
                totalNumber: 20,     //总条数
                totalPage:2,    //总页数
                spareLists: [],      // 查询出来的表格    //要修改或者查看的id  spareLists.id
                // materialCode:1,   
              
                //  导入的弹窗
                LeadIngInVisible: false,
                formLabelWidth: '100px',
                //上传到服务器
                action:"",
                // rest-api/pscm-metadata/material/upload
                // 导入的文件列表
                fileList: [],
                //{name: 'testFile.xlsx', url: 'E:\pscm-web\pscm-ui\leadingInFile'}
                // 查看的弹窗
                materialCode:"",      //查看当前id的信息
                seeSpareVisible:false,
                seeSpareContent:{},     //点击查看，对应的本条的内容显示在弹窗中
                supplierType:1,    //供应商1  索赔商2   维修商3
                defaultSupplier:'',    //供应商里应该有一个默认供应商
                defaultClaimMaker:'',    //供应商里应该有一个默认索赔商
                defaultMaintainer:'',    //供应商里应该有一个默认维修商
                // 供应商  索赔商  维修商
                supplierData: [],
                myPurchaseMethod:"",
                //权限
                powerFlag:false,
                
                selectDisabled:false,     //查询禁用
                statusDisabled:false     //启用禁用状态操作按钮禁用
            };
        },
        created:function(){
            var _this=this;
            _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
        },
        computed:{
            powerData(){
                return this.$store.state.powerData;
            },
            languageType(){
                return this.$store.state.languageType;
            }
        },
        watch:{
            languageType(){
                var _this=this;
                _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
            },
           powerData(){
               var _this=this;
               for(var i=0;i<_this.powerData.length;i++){
                   if(_this.powerData[i]=="ROLE_security_maretialArchives_operation"){
                       //备件档案导入导出及修改权限
                       _this.powerFlag=true;
                   }
               }
           }
        },
        mounted:function(){
            var _this=this;
            _this.$store.commit('currentActive', 'SpareFile');

            // var windowH=$(window).outerHeight();
            // var headerH=$(".el-row").outerHeight();
            // var footerH=$(".footer").outerHeight();
            // var mainH=windowH-headerH-footerH;
            // $(".spare-file-page").height(mainH - 50);

            //判断权限
            for(var i=0;i<_this.powerData.length;i++){
                if(_this.powerData[i]=="ROLE_security_maretialArchives_operation"){
                    //备件档案导入导出及修改权限
                    _this.powerFlag=true;
                }
            }
            // 上传地址
            _this.action=_this.metadata_service+"material/upload";
            // //ajax前后查询按钮禁用
            // $(".selectAll").ajaxStart(function(){
            //     _this.selectDisabled=true;
            // });
            // $(".selectAll").ajaxStop(function(){
            //     _this.selectDisabled=false;
            // });
            // 查询条件中下拉菜单的值
            _this.QueryConditionDownMenuValue();
            //查询按钮
            _this.handleQuery(_this.pageIndex,_this.pageSize);

        },
        methods: {

            //导出
            leadingOutMask(){
                var _this=this;
                _this.fullscreenLoading=true;
                $.ajax({
                    type:'POST',
                    url:_this.metadata_service+'material/exportMater',
                    cache:false,
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        _this.fullscreenLoading=false;
                        window.location.href=_this.metadata_service+'material/exportMater';
                        _this.common.successTip("导出成功");
                    },
                    error:function(){
                        _this.fullscreenLoading=false;
                        _this.common.errorTip("错误");
                    }
                })
            },
            //查询条件中下拉菜单的值
            QueryConditionDownMenuValue(){
                var _this=this;
                var tmp=["meterial.rohsProperty","meterial.psiFlag","meterial.canSupply","meterial.enabled"];
                $.ajax({
                    type:'POST',
                    url:_this.metadata_service+'metadata/getPullDownList',
                    cache:false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.qCDownMenuValueList=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 查询按钮
            handleQuery(pageIndex,pageSize){
                var _this=this;
                _this.loading=true;
                var enabledTF,psiFlagTF,canSupplyTF;
                // 是否启用
                if(_this.queryCriteria.enabled==1){
                    enabledTF=true;
                } else if(_this.queryCriteria.enabled==""){
                    enabledTF="";
                }else{
                    enabledTF=false;
                }
                // PSI标志
                if(_this.queryCriteria.psiFlag==1){
                    psiFlagTF=true;
                } else if(_this.queryCriteria.psiFlag==""){
                    psiFlagTF="";
                }else{
                    psiFlagTF=false;
                }
                // 是否可供货
                if(_this.queryCriteria.canSupply==1){
                    canSupplyTF=true;
                } else if(_this.queryCriteria.canSupply==""){
                    canSupplyTF="";
                }else{
                    canSupplyTF=false;
                }
                var tmp={code:_this.queryCriteria.code,name:_this.queryCriteria.name,enabled:enabledTF,planCategoryName:_this.queryCriteria.planCategory,psiFlag:psiFlagTF,roshProperty:_this.queryCriteria.roshProperty,canSupply:canSupplyTF,providerNo:_this.queryCriteria.providerNo,subclassName:_this.queryCriteria.subclass,providerName:_this.queryCriteria.providerName,claim:_this.queryCriteria.claim,pageIndex:pageIndex,pageSize :pageSize};
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.metadata_service+"material/search",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",     //*****
                    success: function (data) {
                        if (data.success) {
                            _this.loading=false;
                            _this.spareLists=data.data.materialList;  
                             for(var i=0;i<_this.spareLists.length;i++){  // enabled
                                if(_this.spareLists[i].enabled){
                                    _this.spareLists[i].enabled="是";
                                }else{
                                    _this.spareLists[i].enabled="否";
                                }
                            }
                            for(var i=0;i<_this.spareLists.length;i++){  //borrowable enabled
                                if(_this.spareLists[i].borrowable==1){
                                    _this.spareLists[i].borrowable="是";
                                }else{
                                    _this.spareLists[i].borrowable="否";
                                }
                            }
                            for(var i=0;i<_this.spareLists.length;i++){  //canSupply
                                if(_this.spareLists[i].canSupply==1){
                                    _this.spareLists[i].canSupply="是";
                                }else{
                                    _this.spareLists[i].canSupply="否";
                                }
                            }
                            _this.isPaging=true;      //显示分页
                            _this.totalNumber=data.data.totalNumber;    //总条数
                            _this.totalPage=data.totalPage;    //总页数
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.selectDisabled=false;    
                    }
                });
                
            },
            //导入按钮
            leadingInMask(){
                var _this=this;
                _this.LeadIngInVisible = true;
                _this.fileList=[];
            },
            //上传文件之前的钩子
            beforeAvatarUpload(file) {
                const isExcel2007 = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                const isExcel2003 = file.type === 'application/vnd.ms-excel';
                if (!isExcel2007 && !isExcel2003) {
                    var err=_this.languageType=="zh"?'只能上传excel文件':'You can upload only Excel files';
                    this.$message.error(err);
                }
                return isExcel2007 || isExcel2003 ;
            },
            // 文件上传成功时的钩子
             handleAvatarSuccess(res, file) {
                 var _this=this;
                if(res.success){
                    var success=_this.languageType=="zh"?'上传成功！':'Upload successfully!';
                    _this.common.successTip(success);
                    _this.LeadIngInVisible = false;
                }else{
                    _this.fileList=[];
                    _this.common.errorTip(res.errorMessage);
                }
                // console.log(res);
                // console.log(file);
            },
            //文件列表移除文件时的钩子
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            //   分页
            handleSizeChange(val) {          //每页条数
                var _this=this;
                _this.pageSize=val;
                _this.handleQuery(_this.pageIndex,_this.pageSize);
            },
            handleCurrentChange(val) {       // 当前页
                var _this=this;
                _this.pageIndex=val;
                _this.handleQuery(_this.pageIndex,_this.pageSize);
            },
            // 启用禁用
            handleStatus(index,row){
                var _this=this;
                var enabled;
                if(row.enabled == '是'){
                    enabled=false;
                }else{
                    enabled=true;
                }
                var tmp={code:row.code,enabled:enabled};
                _this.statusDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.metadata_service+"material/updateEnabled",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",     //*****
                    success: function (data) {
                        if (data.success) {
                            if(enabled){
                                row.enabled='是';
                            }else{
                                row.enabled='否';
                            }
                            var success=_this.languageType=="zh"?'操作成功':'Successful operation';
                            _this.common.successTip(success);
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }                 
                        _this.statusDisabled=false;    
                    }
                });
            },
            // 修改
            changeSpare(index,row){
                var _this=this;
                _this.$router.push({path:"/UpdateSpare",query:{materialCode: row.code}});
            },
            // 查看
            seeSpare(index,row){
                 var _this=this;
                _this.seeSpareVisible = true;
                _this.materialCode=row.code;
                $.ajax({               //查看
                    type: 'GET',
                    url: _this.metadata_service+"material/findMaterialByCode?materialCode="+_this.materialCode,
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            _this.seeSpareContent=data.data;
                            _this.myPurchaseMethod=data.data.purchaseMethod;
                            //供应商列表
                            _this.showSupplierList();
                        }else
                              _this.common.errorTip(data.errorMessage);

                    }
                });
            },
            //菜单导航
            handleSelect(key, keyPath) {
                var _this=this;
                // console.log(key, keyPath);
                $(".under-table").hide();
                $("."+key).show();
                if(key=="supplier"){
                    _this.supplierType=1;
                }else if(key=="claimMaker"){
                    _this.supplierType=2;
                }else{
                    _this.supplierType=3;
                }

                $.ajax({
                    type: 'GET',
                    url: _this.metadata_service+"material/findMaterialSuppliersByParams?materialCode="+_this.materialCode+"&supplierType="+_this.supplierType,
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            // console.log(data);
                            _this.supplierData=data.data;
                            // 当前状态
                            for(var i=0;i<_this.supplierData.length;i++){
                                if(_this.supplierData[i].status==true){
                                    _this.supplierData[i].status="启用";
                                }else if(_this.supplierData[i].status==false){
                                    _this.supplierData[i].status="禁用";
                                }
                            }
                        }else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });

            },
            // 刚打开页面 默认显示供应商列表
            showSupplierList(){
                var _this=this;
                 $.ajax({
                    type: 'GET',
                    url: _this.metadata_service+"material/findMaterialSuppliersByParams?materialCode="+_this.materialCode+"&supplierType="+_this.supplierType,
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            // console.log(data);
                            _this.supplierData=data.data;
                            // _this.defaultSupplier//获取该备件的默认供应商
                            for(var i=0;i<_this.supplierData.length;i++){   
                                if(_this.supplierData[i].defaultStatus==true){ 
                                    _this.defaultSupplier=_this.supplierData[i].id;
                                    //console.log("默认供应商的code="+_this.defaultSupplier);
                                }
                            }
                            // 当前状态
                            for(var i=0;i<_this.supplierData.length;i++){
                                if(_this.supplierData[i].status==true){
                                    _this.supplierData[i].status="启用";
                                }else if(_this.supplierData[i].status==false){
                                    _this.supplierData[i].status="禁用";
                                }
                            }
                        }else                          
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            }            
        }
    }
</script>



